<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./font_fenlei/iconfont.css">
    <link rel="stylesheet" href="./swiper-7.2.0/swiper/swiper-bundle.min.css"/>
    
    <style>
         html,
        body {
          position: relative;
          height: 100%;
          margin-bottom: 500px;
          
        }
  
        body {
          background: #eee;
          font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
          font-size: 14px;
          color: #000;
          margin: 0;
          padding: 0;
        }
        .top{
          background-image: linear-gradient(50deg, rgb(207, 40, 84),rgb(230, 31, 5));      
            height: 400px;
            display: flex;  
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 10;
            
        }
        .top h5{
            width: 200px;
            position: absolute;
            left: 60px;
            font-size: 30px;
            top: 50px;
            border: 1px solid;
            border-radius: 50px;
            padding: 10px 30px;
            color: rgb(218, 32, 32);
            background-color: rgb(196, 152, 181);
        }
        .top span{ 
            font-size: 50px;
            margin-left: 40px;
        }
        .top input{
            height: 60px;
            border-radius: 50px;
            background-color: white;
            border: none;
            font-size: 40px;
            margin-top: 5px;
            width: 700px
        }
        .top input::-webkit-input-placeholder{
            color: rgb(206, 198, 198);
            font-size: 30px;
            top: 10px;
            left: 10px;
        }
        .ip{
            display: flex;
            background-color: white;
            height: 70px;
            margin-top: 200px;
            margin-left: 30px;
            border-radius: 50px;
            padding-right: 20px;
            
            
        }      
        .icon-saomiao{
            font-size: 60px;
            color: rgb(238, 225, 225);
            margin-top: 50px;
            position: absolute;
            right: 100px;
            top: 50px;
        }
        .icon-fangdajing{
           margin-top: 10px;
           color: rgb(175, 174, 174);
        }
        .icon-zhaoxiangji{
            margin-top: 10px;
            color: rgb(160, 157, 157);
            
        }
        .icon-xiaoxi{
            margin-top: 100px;
            color: rgb(238, 225, 225);
            
            position: absolute;
            right: 20px;
        }
        .twz{
            width: 1000px;
            display: flex;
            position: absolute;
            bottom: 10px;
            left: 0;
            background-color: none;
            overflow-x: auto;
            color: rgb(236, 226, 226);
            
        }
        .twz h2{
            font-size: 40px;
            margin-left: 50px;
        }
        .fl{
            margin-top: 310px;
            margin-left: -130px;
        }
        .fl span{
            z-index: 15;
            display: flex;
            color: white;
        }
        .fl h2{
            font-size: 30px;
            color: white;
            margin-top: -45px;
            margin-left: 100px;
        }
/* swiper */

        .swiper {
        width: 100%;
        height: 400px;
        margin-top: 385px;
            
      }

      .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
   
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .st{
          display: flex;
      
        background-color: rgb(40, 10, 88);  
      }
      .st img{
          width: 200px;
          height: 100px;
          border: 1px solid;
          padding: 10px 30px;
          background-color: white;
          
      }
      .st h2{
          color: rgb(150, 23, 223);
          padding: 0;
          margin: 0;
          text-align: center;
          
      
      }
      .st a{
          text-decoration: none;
      }
      .l{
        margin-left: 30px;
        border: 1px solid rgb(172, 172, 189);
        padding: 10px;
        border-radius: 10%;
      }
      .c{
        margin-left: 50px;
        border: 1px solid rgb(172, 172, 189);
        padding: 10px;
        border-radius: 10%;
      }
      
      .c h2{
          background-color: rgb(76, 76, 189);
          color: white;
      }
      .r{
        margin-left: 40px;
        border: 1px solid rgb(172, 172, 189);
        padding: 10px;
        border-radius: 10%;
      }

.tb{
    display: flex;
    flex-wrap: wrap;
}
.tb>div{
    margin-left: 50px;
}
.tb img{
    width: 150%;
    margin-left: 20px;
}
.tb h2{
    text-align: center;
    
}
.sx{
    display: flex;
  
}
.sx>div{
    margin-left: 90px;
}
.sx h2{
    font-size: 40px;
    text-align: center;
    margin-left: 60px;
}
.sx h3{
    font-size: 40px;
    text-align: center;
    margin-left: 60px;
    color: brown;
}
.sx img{
    width: 120%;
}

.tc{
    display: flex;
    background-color: red;
    
}
.tc h2{
    margin-top: 40px;
    color: white;
    font-size: 30px;
   margin-left: 300px;
}
.tc h3{
    color: tomato;
    background-color: rgb(180, 179, 80);
    padding: 10px 20px;
    font-size: 30px;
    border-radius: 50px;
    margin-left: 30px;

}
    
.bottom{
            background-color:white;        
            height: 130px;
            display: flex;  
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 10;
        }
        .bottom>div{
            display: flex;
            flex-grow: 1;
            height: 70px;
            margin-top: 10px;
            

        }
        .bottom a{
            text-decoration:none
        }
        .bottom span{
            font-size: 60px;
            margin-left: 40px;
            color: black;
           

        }
        .bottom p{
            color: black;
            margin-left: 40px;
            text-align: center;
        }

.qj{
    position: fixed;
    right: 10px;
    bottom: 300px;
    background-color: rgb(221, 126, 18);
    padding: 20px;
    border-radius: 30px;
}
.qj h2{
    color: white;
    font-size: 30px;
    padding: 0;
    margin: 0;
    margin-right: 20px;
}
.qj h3{
    font-size: 40px;
    padding: 0;
    margin: 0;
    position: absolute;
    bottom: 15px;
    right: 0;
}
    </style>
</head>
<body>
    <div class="top">
          <h5>低至两件五折></h5>

            <span class="iconfont icon-saomiao"></span>
            <span class="iconfont icon-xiaoxi"></span>
    
        
        <div class="ip">
            <span class="iconfont icon-fangdajing"></span>
                <a href="./sousuo.html">
                    <input type="search" placeholder="烧烤炉" id="search" name="search" >
                </a>

            <span class="iconfont icon-zhaoxiangji"></span>
        </div>

        <div class="twz">
           
  
        </div>
        <div class="fl">
            <span class="iconfont icon-fenlei"></span>
            <h2>分类</h2>
        </div>
    
</div> -->


 <!-- Swiper -->
 <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="./blf.jpg"></div>
      <div class="swiper-slide"><img src="./drug.jpg"></div>
      <div class="swiper-slide"><img src="./blf.jpg"></div>
      <div class="swiper-slide"><img src="./drug.jpg"></div>
      <div class="swiper-slide"><img src="./blf.jpg"></div>
      <div class="swiper-slide"><img src="./drug.jpg"></div>
      <div class="swiper-slide"><img src="./blf.jpg"></div>
      <div class="swiper-slide"><img src="./drug.jpg"></div>
      
    </div>
    <div class="swiper-pagination"></div>
  </div>

  <div class="st">
      <div class="l">
          <a href="#">
          <img src="./drug.jpg" >
          <h2>赢航空惊喜</h2>
        </a>
      </div>
      <div class="c">
          <a href="#">
          <h2>11.11全球热爱季</h2>
          <img src="./drug.jpg" >
          <h2>好物低至5折GO</h2>
        </a>
      </div>
      <div class="r">
          <a href="#">
          <img src="./drug.jpg">
          <h2>京东超市</h2>
        </a>
      </div>
  </div>

  <div class="tb">
      <div>
        <img src="./fl_tu.png" >
        <h2>京东超市</h2>
      </div>
      <div>
        <img src="./fl_tu.png" >
        <h2>京东电器</h2>
      </div>
      <div>
        <img src="./fl_tu.png" >
        <h2>潮流服饰</h2>
      </div>
      <div>
        <img src="./fl_tu.png" >
        <h2>免费水果</h2>
      </div>
      <div>
        <img src="./fl_tu.png" >
        <h2>京东到家</h2>
      </div>
      <div>
        <img src="./fl_tu.png" >
        <h2>生活·缴费</h2>
      </div>
      <div>
        <img src="./fl_tu.png" >
        <h2>零京豆</h2>
      </div>
      <div>
        <img src="./fl_tu.png" >
        <h2>卷后9.9</h2>
      </div>
      <div>
        <img src="./fl_tu.png" >
        <h2>领金贴</h2>
      </div>
      <div>
        <img src="./fl_tu.png" >
        <h2>PLUS会员</h2>
      </div>
      
  </div>

  <div class="tc">
      <h2>瓜分千万红包 先到先得!</h2>
      <h3>签到领取</h3>
  </div>
  <div class="sx">
      <div>
        <h2>京东秒杀</h2>
        <img src="./drug.jpg" >
        <h3>￥7399</h3>
      </div>
      <div>
        <h2>京东直播</h2>
        <img src="./drug.jpg" >
        
      </div>
      
  </div>

  <div class="bottom">
    <div>
        <a href="./main.html">
        <span class="iconfont icon-shouye"></span>
        <p>首页</p>
    </a>
    </div>
    <div>
        <a href="./fenlei.html">
        <span class="iconfont icon-fenlei"></span>
        <p>分类</p>
    </a>
    </div>
    <div>
        <a href="#">
        <span class="iconfont icon-faxian"></span>
        <p>发现</p>
    </a>
    </div>
    <div>
        <a href="./pay.html">
        <span class="iconfont icon-gouwuche"></span>
        <p>购物车</p>
    </a>
        
    </div>
    <div>
        <a href="./wode.html">
        <span class="iconfont icon-wode"></span>
        <p>我的</p>
    </a>
    </div>
    
    
</div>

<div class="qj">
    <h2>点我领红包</h2>
    <h3>X</h3>
</div>
  <!-- Swiper JS -->
  <script src="./swiper-7.2.0/swiper/swiper-bundle.min.js"></script>

  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".mySwiper", {
      pagination: {
        el: ".swiper-pagination",
      },
    });
  </script>
<script>
    var qj=document.getElementsByClassName("qj")[0];
    var h3=qj.querySelector("h3");
    var h2=qj.querySelector("h2");
    h3.onclick=function(){
        qj.style.display="none";
    }
</script>

<script>
    var data=[{
        sy:"首页",
        dn:"电脑办公",
        wj:"玩具乐器",
        sm:"生猛海鲜"
    }]

    var twz=document.querySelector(".twz");
    for(var i=0;i<data.length;i++){
        twz.innerHTML=`
            <h2>${data[i].sy}</h2>
            <h2>${data[i].dn}</h2>
            <h2>${data[i].wj}</h2>
            <h2>${data[i].sm}</h2>
        `
    }
</script> -->


</body>
</html>